@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	src: url('/fonts/Roboto-Light.ttf');
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/Roboto-Regular.ttf');
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	src: url('/fonts/Roboto-Medium.ttf');
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/Roboto-Bold.ttf');
}

$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;

$swat-blue: #0068C1;
$swat-gray: #F4F5F7;

$border-color: rgba(var(--v-border-color), var(--v-border-opacity));

code, .code {
	font-family: $font-family-monospace;
}

p, ol, ul {
	margin-bottom: 12px;
}

ol, ul {
	padding-left: 40px;
}

.pointer {
	cursor: pointer;
}

td.min, th.min {
	width: 1%;
	white-space: nowrap;
}

.dash-heading {
	font-size: 0.9rem;
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
	color: rgba(var(--v-theme-surface-variant), var(--v-disabled-opacity));
}

.v-tooltip > .v-overlay__content {
	background-color: rgba(0,0,0, 0.9) !important;
	color: white !important;
}

ul.plain-border {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	border-top: 1px solid rgba(255,255,255,0.1);
  
	li {
		padding: 0.5rem;
		border-bottom: 1px solid rgba(255,255,255,0.1);

		a {
			text-decoration: none;

			&.icon {
				color: rgba(255,255,255,0.4);
			}
		}
	}

	&.no-top-bottom {
		border-top: 0;

		li:last-child {
			border-bottom: 0;
		}
	}
}

.file-header {
	border-bottom: 1px solid rgba(255,255,255,0.2);
	
	span.heading {
		padding-bottom: 0.2rem;
	}

	span.info {
		background-color: rgba(255,255,255,0.2);
		font-size: 0.9rem;
		padding: 0.3rem 0.5rem;
	}

	a {
		text-decoration: none;
		color: rgb(var(--v-theme-on-background));
	}
}

mark {
	background-color: rgba(100,255,218, 0.8);
	padding: 2px;
	font-weight: bold;
}

.form-group {
	margin-bottom: 12px;
}

.v-list-item.sub-open {
	padding-top: 8px;
}

.page-action-bar {
	background-color: rgb(var(--v-theme-surface));
	border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
	position: fixed;
	bottom: 0;
	left: 312px;
	width: calc(100% - 312px);
	z-index: 450;

	&.full {
		left: 56px;
		width: calc(100% - 56px);
	}

	&.fullest {
		left: 0;
		width: 100%;
	}

	button {
		margin-top: 7px;
		margin-bottom: 7px;
	}

	.v-pagination button {
		margin-top: 0;
		margin-bottom: 0;
	}

	.v-checkbox-btn {
		min-height: auto;
	}
}

.data-table {
	thead tr th {
		font-weight: bold !important;
		text-transform: uppercase;
		font-size: 0.8rem;
		white-space: nowrap;
	}
}

.bg-secondary-tonal {
	background-color: rgba(var(--v-theme-secondary), 0.12) !important;
	color: rgb(var(--v-theme-secondary)) !important;
}

.scroll-check {
	max-width: 25rem;
	min-width: 16rem;
	border-bottom: 1px solid $border-color;

	.v-checkbox-btn {
		min-height: auto;
	}

	.items {
		max-height: 180px;
		overflow: auto;

		.item {
			display: block !important;
			padding: 0 5px;
			border-bottom: 1px solid $border-color;
		}
	}

	.check-all {
		padding: 0 10px 0 5px;
		border: 1px solid $border-color;
		border-width: 1px 0;
		background-color: rgba(var(--v-theme-secondary), 0.12) !important;
		color: rgb(var(--v-theme-secondary)) !important;
	}
}

.table-editor {
	th {
		white-space: nowrap;
	}

	td.field {
		white-space: nowrap;
		max-width: 300px;
		min-width: 200px;
	}
}

ul.list-group {
	list-style: none;
	padding-left: 0;

	li {
		border: 1px solid $border-color;
		border-radius: 0.3rem;
		padding: 0.75rem 1rem;
		margin: 1px 0;
	}
}

.v-theme--light {
	&#mainContainer {
		background-color: #fafafa;
	}
	#secondary-nav {
		background-color: $swat-gray;
	}

	#action-bar {
		background-color: $swat-gray;
	}
	.page-action-bar {
		background-color: $swat-gray;
	}

	ul.list-group li {
		background-color: $swat-gray;
	}

	ul.plain-border {
		border-top-color: rgba(0,0,0,0.1);
	  
		li {
			border-bottom-color: rgba(0,0,0,0.1);
	
			a {
				&.icon {
					color: rgba(0,0,0,0.4);
				}
			}
		}
	}

	.file-header {
		border-bottom-color: #ECEFF1;
		
		span.info {
			background-color: #ECEFF1;
			color: rgba(0,0,0,0.6);
		}
	}
}

@import 'highcharts/css/highcharts.css';

@media (prefers-color-scheme: dark) {
    :root {
        --highcharts-background-color: #092d54;
    }
}

.highcharts-dark {
    --highcharts-background-color: #092d54;
}

.highcharts-container {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
}
